<template>
    <div style="margin: 10px">
      <el-card style="height:500px">
        <h2 slot="header">时间轴波动信息</h2>
        <div style="display: flex;margin-bottom: 20px">
          <div style="">类型：
            <el-select v-model="typeSelect"  placeholder="请选择" size="mini">
              <el-option v-for="item in typeSelectData" :key="item"
                         :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 10px">
            型号：
            <el-select v-model="modelSelect"  placeholder="请选择" size="mini">
              <el-option v-for="item in modelSelectData" :key="item"
                         :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 10px">编号：
            <el-select v-model="serialSelect" placeholder="请选择" size="mini">
              <el-option v-for="item in serialSelectData" :key="item"
                         :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 10px">
            位置：
            <el-select v-model="positionSelect" placeholder="请选择" size="mini">
              <el-option v-for="item in positionSelectData" :key="item"
                         :label="item.name" :value="item.value"></el-option>
            </el-select>
          </div>
          <div style="margin-left: 10px">
            <el-button class="el-icon-search" size="mini" type="primary">搜索</el-button>
          </div>
        </div>
        <div id="WaveformGraph" style="width: 100%;height: 300px;margin-top: 50px"></div>
      </el-card>
      <div style="margin-top: 10px;display: flex">
        <el-card style="width: 70%">
          <h2 slot="header">基准数据</h2>
          <div style="display: flex;justify-content:flex-end;margin-bottom: 10px">
            <el-button size="mini" type="primary" style="margin-left: 10px">表示</el-button>
            <el-button size="mini" type="primary">非表示</el-button>
            <el-button size="mini" type="primary">覆盖保存</el-button>
          </div>
          <div style="display: flex">
            <el-table :data="basicInfo" stripe style="width: 45%">
              <el-table-column label="加速度波形" prop="name">

              </el-table-column>
              <el-table-column label="测定值" prop="measuredValue">

              </el-table-column>
              <el-table-column label="阈值" prop="Threshold">

              </el-table-column>
            </el-table>
            <div style="width: 10%"></div>
            <el-table :data="basicInfo1" stripe style="width: 45%">
              <el-table-column label="震动强烈度" prop="name">

              </el-table-column>
              <el-table-column label="测定值" prop="measuredValue">

              </el-table-column>
              <el-table-column label="阈值" prop="Threshold">

              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <el-card style="width: 30%;margin-left: 10px">
          <h2 slot="header">即时监控动作</h2>
          <div>
            <el-button size="mini" type="primary">重复</el-button>
            <el-button size="mini" type="primary">一次</el-button>
          </div>
        </el-card>
        <el-card style="width: 170px;margin-left: 10px">
          <h2 slot="header">基本操作</h2>
          <div style="display: flex;flex-flow: column;justify-content: space-evenly;flex: 10px">
            <div>
              <el-button size="mini" type="primary" style="width: 100%;margin-bottom: 10px">未处理</el-button>
            </div>
            <div>
              <el-button size="mini" type="primary" style="width: 100%;margin-bottom: 10px">滤波后</el-button>
            </div>
            <div>
            <el-button size="mini" type="primary" style="width: 100%;margin-bottom: 10px">包路线</el-button>
            </div>
            <div>
            <el-button size="mini" type="primary" style="width: 100%;margin-bottom: 10px">通常表示</el-button>
            </div>
            <div>
            <el-button size="mini" type="primary" style="width: 100%;margin-bottom: 10px">广域表示</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
</template>

<script>
    export default {
        name: "trainStatusCard",
        data(){
          return{
            typeSelect:'',//类型选择绑定和选择的数据
            typeSelectData:[{'name':'跑车',value:1},{'name':'货车',value:2},{'name':'装甲车',value:3}],
            modelSelect:'',//型号选择绑定和选择的数据
            modelSelectData:[{'name':'99A',value:1},{'name':'100A',value:2},{'name':'109A',value:3}],
            serialSelect:'',//编号选择绑定和选择的数据
            serialSelectData:[{'name':'110014',value:1},{'name':'155514',value:2},{'name':'11474',value:3}],
            positionSelect:'',//位置选择绑定和选择的数据
            positionSelectData:[{'name':'北京',value:1},{'name':'天津',value:2},{'name':'上海',value:3}],
            basicInfo:[{'name':'零·峰值(m/s^2)','measuredValue':4.85,'Threshold':17.91},
              {'name':'RMS(m/s^2)','measuredValue':1.21,'Threshold':4.39},
              {'name':'波高半数','measuredValue':4.03,'Threshold':8.15}],
            basicInfo1:[{'name':'速度RMS值(mm/s^2)','measuredValue':4.85,'Threshold':17.91},],
              // {'name':100,'measuredValue':200,'Threshold':300},
              // {'name':100,'measuredValue':200,'Threshold':300}
          }
        },
        mounted() {
          this.DrawWaveformGraph()
        },
        methods:{
          DrawWaveformGraph(){
            let myChart = this.$echarts.init(document.getElementById('WaveformGraph'));
            let option = {
              tooltip : {
                trigger: 'axis'
              },
              legend: {
                data:['零·峰值','RMS','波高半数','速度RMS值']
              },
              toolbox: {
                show : true,
                feature : {
                  mark : {show: true},
                  // dataView : {show: true, readOnly: true},
                  magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                  restore : {show: false},
                  saveAsImage : {show: false}
                }
              },
              calculable : true,
              xAxis : [
                {
                  type : 'category',
                  name:'时间',
                  boundaryGap : false,
                  data : ['19:54','19:55','19:56','19:57','19:58','19:59','20:00']
                }
              ],
              yAxis : [
                {
                  name: '速度',
                  type : 'value'
                }
              ],
              series : [
                {
                  name:'零·峰值',
                  type:'line',
                  stack: '零·峰值',
                  smooth: true,
                  data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                  name:'RMS',
                  type:'line',
                  stack: 'RMS',
                  smooth: true,
                  data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                  name:'波高半数',
                  type:'line',
                  stack: '波高半数',
                  smooth: true,
                  data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                  name:'速度RMS值',
                  type:'line',
                  stack: '速度RMS值',
                  smooth: true,
                  data:[320, 332, 301, 334, 390, 330, 320]
                },
              ]
            };
            myChart.setOption(option);
          },
        }
    }
</script>

<style scoped>
@import "../../assets/css/table.css";
</style>
